<template>
  <div class="TUI-ImageMessage">
    <el-image :class="'image-message ' + (isMine ? 'my-image' : '')" :src="renderDom[0].src" :preview-src-list="[renderDom[0].src]">
    </el-image>
  </div>
</template>

<script>
import {parseImage} from "@/utils/im";

export default {
  name: "MessageImage",
  data() {
    return {
      renderDom: [],
      percent: 0
    };
  },

  components: {},
  props: {
    message: {
      type: Object,
      default: ''
    },
    isMine: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    message: {
      handler: function(newVal) {
        this.renderDom=parseImage(newVal);
        this.percent=newVal.percent;
      },
      immediate: true,
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
.TUI-ImageMessage {
  width: 150px;
}

.image-message {
  max-width: 300px;
  border-radius: 10px 10px 10px 10px;
}

.my-image {
  border-radius: 10px 2px 10px 10px;
}

</style>
